<template>
  <div>
    <button @click="setDialogTableVisible">添加用户</button>
    <button @click="deleteUsers">批量取消授权</button>
    <el-dialog :title="title" :visible.sync="dialogTableVisible">
      <el-table :data="show" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="60"> </el-table-column>
        <el-table-column
          property="username"
          label="用户名"
          width="150"
        ></el-table-column>
        <el-table-column
          property="password"
          label="用户密码"
          width="150"
        ></el-table-column>
        <el-table-column
          property="sex"
          label="性别"
          width="50"
          :formatter="sexFormatter"
        ></el-table-column>
        <el-table-column
          property="birthday"
          label="生日"
          width="150"
        ></el-table-column>
        <el-table-column
          property="age"
          label="年龄"
          width="50"
        ></el-table-column>
        <el-table-column property="status" label="用户状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" size="small" type="success"
              >启用</el-tag
            >
            <el-tag
              v-else-if="scope.row.status === 2"
              size="small"
              type="danger"
              >禁用</el-tag
            >
          </template></el-table-column
        >
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRoleByUser">确 定</el-button>
      </div>
    </el-dialog>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="60"> </el-table-column>
      <el-table-column prop="username" label="用户名" width="150">
      </el-table-column>
      <el-table-column prop="password" label="密码" width="120">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="120"
        :formatter="sexFormatter"
      >
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
      <el-table-column prop="birthday" label="生日" width="300">
      </el-table-column>
      <el-table-column prop="status" label="角色状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" size="small" type="success"
            >启用</el-tag
          >
          <el-tag v-else-if="scope.row.status === 2" size="small" type="danger"
            >禁用</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
          <el-button @click="deleteUsers" type="text" size="small">取消授权</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  methods: {
    addRoleByUser() {
      this.$httpRequest
        .post("/auto/addRoleByUser/" + this.roleId, this.users)
        .then(({ data }) => {
          console.log(data);
          this.$router.go(0);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleSelectionChange(val) {
      this.users = val;
    },
    deleteUsers() {
   this.$httpRequest
        .post("/auto/deleteUsers/" + this.roleId, this.users)
        .then(({ data }) => {
          this.$router.go(0);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    sexFormatter(row, column, cellValue, index) {
      return cellValue == 0 ? "女" : "男";
    },
    //显示所有
    findUserByRid() {
      var app = this;
      this.roleId = this.$route.params.id;
      this.$httpRequest
        .post("auto/selectRoleUser/" + this.roleId)
        .then(({ data }) => {
          app.tableData = data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改用户
    updateUser(row) {
      this.$router.push("/toUpdateUser/" + row.id);
    },
    setDialogTableVisible() {
      var app = this;
      this.roleId = this.$route.params.id;
      this.$httpRequest
        .post("user/selectAllUser")
        .then(({ data }) => {
          app.show = data.data;
          app.dialogTableVisible = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted: function () {
    this.findUserByRid();
  },
  data() {
    return {
      show: [],
      tableData: [],
      dialogTableVisible: false,
      title: "分配用户",
      roleId: "",
      users: [],
    };
  },
};
</script>
<style scoped>
</style>